import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from 'react';
import {
  Divider,
  Form,
  Input,
  Modal,
  Steps,
  Select,
  Message,
} from '@arco-design/web-react';
import {
  addLessonApi,
  addTeachersApi,
  getAllDicApi,
  getDicValueApi,
  getLessonsApi,
  getTreeApi,
  updateLessonApi,
} from '@/request/api';
const Step = Steps.Step;
const FormItem = Form.Item;
const TextArea = Input.TextArea;

const Option = Select.Option;

const TeacherModal = forwardRef(
  (
    props: {
      cancelBackToRefresh;
      
    },
    ref
  ) => {
    const [visible, setVisible] = useState(false); // table
    const [step, setStep] = useState(1);

    useImperativeHandle(ref, () => ({
      changeVal: (newVal) => {
        setVisible(newVal);
      },
      setUpdateId: (newVal) => {
        setUpdateId(newVal);
      },
      setFormData: (newVal) => {
        form.setFieldsValue(newVal);
      },
      resetFormData: () => {
        form.resetFields();
      },
    }));

    const [form] = Form.useForm();
    const formRef = useRef();
    const [formData, setFormData] = useState({ deptId: [] });
    const [updateId, setUpdateId] = useState();
    const [teachers, setTeachers] = useState([]); //课程体系

    useEffect(() => {
      fetchTeachers();
    }, []);

    const fetchTeachers = () => {
      getAllDicApi({
        sysRoleId: 2,
      })
        .then((res) => {
          const { data } = res;
          setTeachers(data);
        })
        .catch((e) => {
          console.log(e);
        });
    };

    const onValuesChange = (changeValue, values) => {
      setFormData(values);
    };

    const onOK = async () => {
      try {
        await form.validate();

        addTeachersApi({ id: updateId, ...formData })
          .then((res) => {
            const { msg } = res;
            Message.success(msg);
            setVisible(false);
            props.cancelBackToRefresh();
          })
          .catch((e) => {
            console.log(e);
          });
      } catch (e) {}
    };

    return (
      <Modal
        title="课程老师"
        visible={visible}
        onOk={onOK}
        onCancel={() => setVisible(false)}
      >
        <Form
          autoComplete="off"
          form={form}
          ref={formRef}
          onValuesChange={onValuesChange}
        >
          <FormItem label="课程教师" field="teacherIdList">
            <Select mode="multiple" placeholder="下拉选择" allowClear>
              {teachers.map((option, index) => (
                <Option key={option.key} value={option.key}>
                  {option.value}
                </Option>
              ))}
            </Select>
          </FormItem>
        </Form>
      </Modal>
    );
  }
);

export default TeacherModal;
